<template>
	<view class="tab-bar">
		<view class="tab-bar-item" v-for="(item, index) in tabbarList" :key="index" @click="switchTab(item, index)">
			<view v-if="item.type == 1" class="item-1">
				<image class="icon" :src="selected == item.id ? item.selectedIconPath : item.iconPath"></image>
				<view class="text" :class="{'text-selected': selected == item.id}">{{ item.text }}</view>
			</view>
			<view v-else-if="item.type == 2" class="item-2">
				<image src="@/img/yangcan/ic_reservation.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props: {
			selected: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				tabbarList: [
					{
						id: 1,
						type: 1,
						pagePath: "/pages/oxygen/index",
						iconPath: "/static/tabbar/ic_home.png",
						selectedIconPath: "/static/tabbar/ic_home_active.png",
						text: "首页"
					},
					{
						type: 2,
						pagePath: "/pages/oxygen/reservation-info",
					},
					{
						id: 2,
						type: 1,
						pagePath: "/pages/mine/mine",
						iconPath: "/static/tabbar/ic_user.png",
						selectedIconPath: "/static/tabbar/ic_user_active.png",
						text: "我的"
					},
				]
			};
		},
		methods: {
			switchTab(item, index) {
				console.log("item", item.pagePath)
				if(item.type == 1) {
					uni.switchTab({
						url: item.pagePath
					})
				} else {
					if (!this.$isLogin()) return;
					uni.navigateTo({
						url: item.pagePath
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 138rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 30rpx rgba(165, 168, 171, 0.83) !important;
		z-index: 199;
		.tab-bar-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.item-1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.icon {
					width: 48rpx;
					height: 48rpx;
				}
				.text {
					font-family: SourceHanSansCN;
					font-size: 30rpx;
					color: #666666;
				}
				.text-selected {
					color: #fa7601;
				}
			}
			
			.item-2 {
				width: 135rpx;
				height: 129rpx;
				border-radius: 150rpx;
				margin-top: -80rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>